﻿<div class="WAll PT">

	<div class="BlockLabel">媒体列表几乎和数据列表相同，但对于更复杂的数据，如产品，进行更灵活的可视化布局</div>
	
	<div class="ContentBlockTitle">歌曲</div>
	
	<ul class="ListBlock MediaList">
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="80"/></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/02.jpg" width="80"/></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">不要阻止我</div>
						<div class="ItemAfter">$22</div>
					</div>
					<div class="ItemSubtitle">女王</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
		</li>
	</ul>
	<div class="ContentBlockTitle">简单的列表</div>
	<ul class="ListBlock MediaList">
		<li class="ListItem">
			<a href="javascript:;" class="ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="44"/></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">黄色潜艇</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
				</div>
			</a>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/02.jpg" width="44"/></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">不要阻止我</div>
					</div>
					<div class="ItemSubtitle">女王</div>
				</div>
			</a>
		</li>
	</ul>
	
	<div class="ContentBlockTitle">带圆角块级列表</div>
	<ul class="ListBlock ListCard MediaList">
		<li class="ListItem">
			<a href="javascript:;" class="ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="44"/></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">黄色潜艇</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
				</div>
			</a>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/02.jpg" width="44"/></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">不要阻止我</div>
					</div>
					<div class="ItemSubtitle">女王</div>
				</div>
			</a>
		</li>
	</ul>
	

</div>




















